<template>
  <div class="skinChange">
    <van-nav-bar title="肤质变化">
      <template #left>
        <van-icon
          name="arrow-left"
          size="19"
          color="#000000"
          @click="changeback"
        />
      </template>
      <template #right>
        <van-icon name="question-o" size="19" color="#000000" />
      </template>
    </van-nav-bar>
    <div class="wrapper">
      <van-tabs v-model="active" title-active-color="white" scrollspy sticky>
        <div class="banner">
          <img src="../../public/images/mine/background.png" alt="" />
          <div class="text">
            真棒!成功记录了1天的肤质数据。每周测肤2天就可
            以比较好地记录肤质变化了，测的天数越多越准哦~
          </div>
        </div>
        <van-tab v-for="item in Title.state" :title="item" :key="item">
        </van-tab>
        <div class="content">
          <div class="content1">
            <div class="left">
              <i>|</i>
              <p>综合得分</p>
            </div>
            <div class="right">
              <van-switch
                v-model="checked"
                inactive-color="#EEEEEE"
                size="18"
              />
            </div>
          </div>
          <Zhexian />
        </div>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Zhexian from "../components/index/zhexian.vue";
// import Score from "../components/index/zhexian.vue";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import "../assets/css/Mine/SkinChange.less";
export default {
  components: {
    Zhexian,
  },
  setup() {
    const router = useRouter();
    const Title = reactive({
      state: ["综合得分", "出油状况", "光滑度", "黑眼圈", "痘痘"],
    });
    const changeback = () => {
      router.push("/home/mine");
    };
    const checked = ref(0);
    const state = () => {
      checked.value = true;
    };

    const changeSwitch = (val) => {
      console.log(val);
    };

    return {
      Title,
      checked,
      changeback,
      state,
      changeSwitch,
    };
  },
  // componments: {
  //   Score,
  // },
};
</script>
